<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>竞价商品</title>
<link rel="stylesheet" th:href="@{/moon/css/bootstrap2.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/layui/layui.css}" />
</head>
<body class="bg-c">
	<div class="container-fluid" id="app">
		<div class="row">
			<div class="col text-center bg-info text-white ">竞 价 商 品 数 据</div>
		</div>
		<div class="row mt-2">
			<div class="col">
				<div class="form-inline">
					<button class="btn btn-sm btn-info ml-2">竞 价 室</button>
				</div>
				<div class="row mt-2">
					<table class="table table-striped bg-light">
						<thead>
							<tr>
								<td>编号</td>
								<td>买家姓名</td>
								<td>竞拍商品</td>
								<td>买家状态</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="a in auctionGoodsData">
								<td>{{a.aid}}</td>
								<td>{{a.uname}}</td>
								<td>{{a.gname}}</td>
								<td>{{a.userstatus}}</td>
								<td>
									<button class="btn btn-info btn-sm" data-toggle="modal"
										data-target="#myModal1" @click="edit(a.aid)" title="编辑状态">
										<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									</button>
									<button class="btn btn-info btn-sm" data-toggle="modal"
										data-target="#myModal2" @click="buyerInfo(a.aid)" title="买家信息">
										<i class="fa fa-user" aria-hidden="true"></i>
									</button>
									<button class="btn btn-info btn-sm" data-toggle="modal"
										data-target="#myModal3" @click="record(a.aid)" title="出价记录">
										<i class="fa fa-list" aria-hidden="true"></i>
									</button>
								</td>
							</tr>

						</tbody>

					</table>
				</div>
				<!-- 编辑状态 -->
				<form action="/woniu/Auction/editBuyerStatus" method="post">
					<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="myModalLabel">编 辑 状 态</h5>
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">x</button>
								</div>
								<div class="modal-body" style="width: 100%;">
									<div class="form-group">
										<label for="lastname" class="col-sm-3 control-label">竞
											拍 编 号</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="aid"
												v-model="editStatusData.aid">
										</div>
									</div>

									<div class="form-group">
										<label for="firstname" class="col-sm-3 control-label">买
											家 姓 名</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="uname"
												v-model="editStatusData.uname" disabled="disabled">
										</div>
									</div>

									<div class="form-group">
										<label for="firstname" class="col-sm-3 control-label">竞
											拍 商 品</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="gname"
												v-model="editStatusData.gname" disabled="disabled">
										</div>
									</div>
									<div class="form-group">
										<label for="firstname" class="col-sm-3 control-label">买
											家 状 态</label>
										<div class="col-sm-7">
											<select data-placeholder="选择状态..." class="form-control"
												v-model="editStatusData.userstatus" name="userstatus">
												<option value="">===请选择状态===</option>
												<option value="正常">正常</option>
												<option value="禁言">禁言</option>
												<option value="禁止出价">禁止出价</option>
											</select>

										</div>
									</div>

								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-light"
										data-dismiss="modal">关闭</button>
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</div>
					</div>
				</form>
				<!-- 买家信息 -->
				<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="myModalLabel">买 家 信 息</h5>
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">x</button>
							</div>
							<div class="modal-body" style="width: 100%;">
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">用
										户 名 </label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="uname"
											v-model="buyerData.uname" disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">
										邮 箱</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="email"
											v-model="buyerData.email" disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">
										手 机 号 码</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="tel"
											v-model="buyerData.tel" disabled="disabled">
									</div>
								</div>
								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">
										买 家 状 态</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="userstatus"
											v-model="buyerData.userstatus" disabled="disabled">
									</div>
								</div>
								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">
										账 户 状 态</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="accountstatus"
											v-model="buyerData.accountstatus" disabled="disabled">
									</div>
								</div>
								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">
										身 份 证 号</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="idcard"
											v-model="buyerData.idcard" disabled="disabled">
									</div>
								</div>
								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">
										创 建 时 间</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="utime"
											v-model="buyerData.utime" disabled="disabled">
									</div>
								</div>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>

				<!-- 出价记录 -->
				<div class="modal fade" id="myModal3" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="myModalLabel">出 价 记 录</h5>
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">x</button>
							</div>
							<div class="modal-body" style="width: 100%;">
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label"> 竞
										价 编 号</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="aid"
											v-model="recordData.aid" disabled="disabled">
									</div>
								</div>
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">竞
										拍 商 品</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="gname"
											v-model="recordData.gname" disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">买
										家 姓 名</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="bname"
											v-model="recordData.bname" disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">卖
										家 姓 名</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="sname"
											v-model="recordData.sname" disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">出
										价 时 间 </label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="recordtime"
											v-model="recordData.recordtime" disabled="disabled">
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label">出
										价 价 格 </label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="recordprice"
											v-model="recordData.recordprice" disabled="disabled">
									</div>
								</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
							</div>
							</div>
						</div>
					</div>
				</div>

				<div class="clearfix"></div>
				<div class="mt-2">
					<div id="pager" class="pagination"></div>
				</div>
			</div>
		</div>
	</div>

	<!-- js -->
	<script th:src="@{/moon/js/jquery.js}"></script>
	<script th:src="@{/moon/js/bootstrap.js}"></script>
	<script th:src="@{/moon/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:src="@{/My97DatePicker/WdatePicker.js}"></script>
	<script th:src="@{/layui/layui.js}"></script>
	<script th:inline="javascript">
		var pageNum = 1;

		//app
		var app = new Vue({
			el : "#app",
			data : {
				auctionGoodsData : [],
				editStatusData : {},
				buyerData:{},
				recordData:{}
			},
			methods : {
				showdata : function(flag) {
					if (flag) {
						pageNum = 1;
						$("#pager").jqPaginator("option", {
							currentPage : 1
						});
					}
					$.post("/auction/Auction/selectByPage", {
						pageNum : pageNum,
						pageSize : 5
					}, function(data) {
						app.auctionGoodsData = data.list;
						//alert(JSON.stringify(data));
						//修改totalPages
						$("#pager").jqPaginator("option", {
							totalPages : data.pagecount
						});
					});
				},
				edit : function(id) {
					$.post("/auction/Auction/selectById", "aid=" + id, function(
							data) {
						app.editStatusData = data;
					})
				},
				buyerInfo : function(id) {
					$.post("/auction/Auction/selectBuyerInfo", "aid=" + id, function(
							data) {
						app.buyerData = data;
					})
				},
				record : function(id){
					$.post("/auction/Auction/selectRecord","aid=" + id,function(data){
						app.recordData = data;
					});
				}
			},

		});

		//setpager
		$("#pager").jqPaginator({
			totalPages : 1,
			currentPage : 1,
			visiblePages : 5,
			onPageChange : function(num, type) {
				pageNum = num;
				$('#text').html('当前第' + num + '页');
				app.showdata();
			}
		});
	</script>
</body>
</html>
